<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5ykKBm9eB2hstTJwjqYAbhRzJlgbhhCrdN1l84Y2xPlzBgof0hQge8wL-CCZJoQ2ehwdnsIsglHFPg" type="text/javascript"></script>
    <script type="text/javascript" src="../js/date.js"></script>
    <script type="text/javascript" src="../js/gmap-wms.js"></script>
    <script type="text/javascript" src="../js/prototype.js"></script>
    <script type="text/javascript" src="../js/mapstraction.js"></script>
    <!--[if IE]>
        <script type="text/javascript" src="../js/excanvas.js"></script>
        <script type="text/javascript" src="../js/base64.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/canvastext.js"></script>
    <script type="text/javascript" src="../js/flotr-0.2.0-alpha.js"></script>
    <script type="text/javascript" src="../js/ObjTree.js"></script>
    <script type="text/javascript" src="../js/tools4gps.js"></script>
</head>

<body>

<div id="map" style="width: 650px; height: 340px"></div>
<div id="botones">
<img id="zoom" src="img/zoom_off.png" width="22" height="22">
<img id="xaxis" src="img/dist_off.png" width="22" height="22">
<img id="yaxis" src="img/elev_off.png" width="22" height="22">
</div>
<div id="perfil" style="width:650px; height:160px;"></div>

<table id="datos">
<tr>
  <td>Distancia total: <span class='totDist'></span> Km</td>
  <td>Distacia 3D: <span class='totDist3d'></span> Km</td>
</tr>
<tr>
  <td>Altura m&aacute;xima: <span class='maxElev'></span> m</td>
  <td>Altura m&iacute;nima: <span class='minElev'></span> m</td>
</tr>
<tr>
  <td>Desnivel subida: <span class='elevGain'></span> m</td>
  <td>Desnivel bajada: <span class='elevLoss'></span> m</td>
</tr>
<tr>
  <td>Velocidad media: <span class='avgVel'></span> Km/h</td>
  <td>Velocidad m&aacute;xima: <span class='maxVel'></span> Km/h</td>
</tr>
<tr>
  <td>Tiempo total: <span class='totTime'></span> h</td>
  <td>Tiempo detenido: <span class='totTimeStop'></span> h</td>
  <td>Tiempo movimiento: <span class='totTimeMove'></span> h</td>
</tr>
<tr>
  <td>Tiempo subiendo: <span class='totTimeUp'></span> h</td>
  <td>Tiempo llaneando: <span class='totTimeFlat'></span> h</td>
  <td>Tiempo bajando: <span class='totTimeDown'></span> h</td>
</tr>
</table>
<br/>
<table id="ruta">
  <thead>
  <th class='num'>Num</th>
  <th class='dist'>Dist</th>
  <th class='elev'>Elev</th>
  <th class='name'>Name</th>
  <th class='lat'>Lat</th>
  <th class='lon'>Lon</th>
  <th class='time'>Time</th>
  <th class='hour'>Hour</th>
  <th class='totTime'>totTime</th>
  <th class='totDist'>totDist</th>
  <th class='elevGain'>elevGain</th>
  <th class='elevLoss'>elevLoss</th>
  </thead>
  <tbody>
  </tbody>
</table>

<script type="text/javascript">
    //Wait till dom's finished loading.
    document.observe('dom:loaded', function() {
        var map = new Mapstraction('map','google');
        map.addControls({
            pan: true, 
            zoom: 'small',
            scale: true,
            map_type: false 
        });

        var WMS_URL_ROUTE = 'http://idecan3.grafcan.es/ServicioWMS/carto5?';
        var G_IDECAN_TOPO = createWMSSpec(WMS_URL_ROUTE, 'Mapa topográfico a escala 1:5.000 de Canarias (2002/2005)', 'IDECan', 'TEXTOS,PA,CONS,VIAL,MUN,HID,CN,FONDO', 'default', 'image/png', '1.0.0');
        var WMS_URL_ROUTE = 'http://idecan2.grafcan.es/ServicioWMS/Callejero?';
        var G_IDECAN_CALL = createWMSSpec(WMS_URL_ROUTE, 'Callejero digital de Canarias', 'Callejero', 'TOPO,POI,NUMP,VIAS,CONS,MUN,FONDO', 'default', 'image/png', '1.0.0');
        var WMS_URL_ROUTE = 'http://idecan1.grafcan.es/ServicioWMS/OrtoExpress?';
        var G_IDECAN_ORTEX = createWMSSpec(WMS_URL_ROUTE, 'OrtoExpress de Canarias (años 2006/2008)', 'OrtoExpress', 'ortoexpress', 'default', 'image/jpeg', '1.0.0');
        var WMS_URL_ROUTE = 'http://idecan2.grafcan.es/ServicioWMS/Vegetacion?';
        var PLANURB = createWMSSpec(WMS_URL_ROUTE, 'Planeamiento Urbanístico', 'Planeamiento', 'Vreal', 'default', 'image/gif', '1.0.0',false, 0.25);
        var G_IDECAN_URB = createWMSOverlaySpec(G_SATELLITE_MAP, PLANURB, 'Planeamiento Urbanístico', 'Planeamiento');
        map.maps.google.addMapType(G_PHYSICAL_MAP);
        map.maps.google.addMapType(G_SATELLITE_3D_MAP);
        map.maps.google.addMapType(G_IDECAN_TOPO);
        map.maps.google.addMapType(G_IDECAN_CALL);
        map.maps.google.addMapType(G_IDECAN_ORTEX);
        map.maps.google.addMapType(G_IDECAN_URB);
        map.maps.google.setMapType(G_IDECAN_TOPO);
        var mapTypesControl = new GHierarchicalMapTypeControl();
        mapTypesControl.addRelationship(G_NORMAL_MAP, G_PHYSICAL_MAP, "Con relieve", true);
        mapTypesControl.addRelationship(G_SATELLITE_MAP, G_SATELLITE_3D_MAP, "Vista en 3D", false);
        mapTypesControl.addRelationship(G_IDECAN_TOPO, G_IDECAN_ORTEX, "OrtoExpress", false);
        mapTypesControl.addRelationship(G_IDECAN_TOPO, G_IDECAN_CALL, "Callejero", false);
        mapTypesControl.addRelationship(G_IDECAN_TOPO, G_IDECAN_URB, "Planeamiento", false);
        map.maps.google.addControl(mapTypesControl);

        GPS.setI18N('es');
        var parser = new GPS.Parser("gpsdata/070121_itobal-lascuevas.gpx");
        parser.run(function (gpsData) {
            var chart = new GPS.Profile("perfil", gpsData, {join: false, rte: {color: '#0000ff'}});
            var report = new GPS.Report("datos", gpsData, {'chart': chart, filterRadius: 1});
            var botones = new GPS.ButtonBar("botones", {'chart': chart, 'report': report});
            var ruta = new GPS.Planner("ruta", gpsData, {source: 'trk', includeEnd: false, sourceRef: [0, 2,3,4], filterRadius: 0});
            var gpsmap = new GPS.Map(map, gpsData, {
                'chart': chart, trk: {color: '#0000ff'},
                wpt: {
                    icon: "img/icon46.png", iconSize: [32,32], iconAnchor: [16,16], 
                    iconShadow: "img/icon46s.png", iconShadowSize: [59,32]
                },
                marker: {
                    icon: "img/icon52.png", iconSize: [32,32], iconAnchor: [16,16], 
                    iconShadow: "img/void.png", iconShadowSize: [32,32]
                }
            });
        });
    });            
    
</script>

</body>
</html>
